VChart 1.13.0
Tutorials
Contributing
Options
API
FAQ
Themes 🌼
Changelogs
Online Customization
Playground
VChart Story Teller

Not only an out-of-the-box multi-terminal chart library, but also a vivid and flexible data storyteller.

VTable Checkered Artist

Not only a high-performance multi-dimensional data analysis form, but also a grid artist created between rows and columns.

VGrammar Data Magician

It is not only a visual grammar that generates thousands of charts, but also a data magician who turns boring into magic.

VRender Visual Rendering

Not only a visual rendering engine with rich functions, but also a handy pen.

VMind Smart Visualization Suit

Not just automatic, but also fantastic.

VStory Relationship Explorer plus

It is not only a fully functional graph visualization library, but also an explorer of data relationships.

!!!###!!!title=149- How to obtain the relative position of the brush in the coordinate system in the vchart library——VisActor/VChart FAQ documents!!!###!!!!!!###!!!description=---title: 66. How to get the relative position of the brush in the coordinate system in the vchart chart library?</br>key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM--- !!!###!!!

Question title

How to obtain the relative position of brush in the coordinate system in the vchart chart library?

Problem description

When I was using the vchart library, I encountered a problem. I listened to the onBrushEnd event and wanted to obtain the relative position of the area selected by the brush in the coordinate system. That is, after I drew a frame on the chart, I wanted to obtain the position range of this area on the x/y axis. I tried all the methods I could think of, but did not find the corresponding data.

Solution

According to the design and usage of vchart, currently the vchart API does not directly provide this information, but it is still possible to obtain this necessary information through some other means. The specific steps are as follows:

  • Use vchart.getAllComponents () to find the brush component

  • In the brush component, there is a property called _brushComponent. AABBBounds , which is the relative position of the checkbox in the region.

  • Similarly, with the vchart.getAllComponents () method, we can find the components for the x and y axes.

  • In the found axis component, we can use the _scale .invert (position) method to convert the position of AABBBounds obtained in the previous step to specific values on the x and y axes.

In order to prevent a very small position shift when the user clicks and accidentally triggers the brush drawing, we can also set a sizeThreshold property for the brush. This property means the checkbox size threshold, which literally means the minimum size of the box you need to draw. The brush event will only be triggered when the size of the box is greater than this threshold.

Related Documents